<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html ng-app="app" id="ng-app">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%@include file="/include/style.jsp"%>
<%@include file="/include/script.jsp"%>
<script type="text/javascript" src="/js/page/enum.js?v=<%=Constants.VERSION %>"></script>
<script type="text/javascript" src="/js/page/orderForm.js?v=<%=Constants.VERSION %>"></script>
<script type="text/javascript">
var ORDER_ID = '${requestScope.id}';
</script>
</head>
<body ng-controller="OrderCtrl">
<form name="orderForm" class="form-horizontal" autocomplete="off" novalidate>
	<legend>
		<span ng-if="mode == 'create'">新增订单</span>
		<span ng-if="mode == 'update'">修改订单</span>
	</legend>
	
	<div class="form-container form-horizontal">
		<c:if test="${requestScope.id == null}">
		<div class="form-group">
			<label class="col-sm-1 control-label">
				<span class="star-icon">*</span>订单编号：
			</label>
			<div class="col-sm-6" ng-class="(orderForm.orderId.$dirty || orderForm.submited) && orderForm.orderId.$invalid && 'has-error'">
				<input type="text" class="form-control" ng-model="editingOrder.id" name="orderId" maxlength="50" ng-required="mode == 'create'"/>
				<span class="text-danger" ng-if="orderForm.orderId.$dirty && orderForm.orderId.$invalid">
					<span ng-if="orderForm.orderId.$error.duplicated">订单编号重复</span>
				</span>
			</div>
		</div>
		</c:if>
		<c:if test="${requestScope.id != null}">
		<div class="form-group">
			<label class="col-sm-1 control-label">
				<span class="star-icon">*</span>订单编号：
			</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" ng-model="editingOrder.id" readonly="readonly"/>
			</div>
		</div>
		</c:if>
		
		<div class="form-group">
			<label class="col-sm-1 control-label">
				<span class="star-icon">*</span>客户：
			</label>
			<div class="col-sm-2" ng-class="(orderForm.customerId.$dirty || orderForm.submited) && orderForm.customerId.$invalid && 'has-error'">
				<input type="text" class="form-control" placeholder="客户ID" ng-model="editingOrder.customerId" name="customerId" maxlength="50" required/>
			</div>
			<div class="col-sm-2" ng-class="(orderForm.customerEmail.$dirty || orderForm.submited) && orderForm.customerEmail.$invalid && 'has-error'">
				<input type="text" class="form-control" placeholder="客户邮箱" ng-model="editingOrder.customerEmail" name="customerEmail" 
					maxlength="100" ng-pattern="/[a-zA-Z0-9]+([._\-][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([._\-][a-zA-Z0-9]+)*([.][a-zA-Z]+)+?/" required/>
				<span class="text-danger" ng-if="orderForm.customerEmail.$dirty && orderForm.customerEmail.$invalid">
					<span ng-if="orderForm.customerEmail.$error.pattern">邮箱格式有误</span>
				</span>
			</div>
			<div class="col-sm-2" ng-class="(orderForm.customerPhone.$dirty || orderForm.submited) && orderForm.customerPhone.$invalid && 'has-error'">
				<input type="text" class="form-control" placeholder="电话" ng-model="editingOrder.customerPhone" name="customerPhone" maxlength="50" required/>
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-1 control-label">
				<span class="star-icon">*</span>授权日期：
			</label>
			<div class="col-sm-2" ng-class="(orderForm.saleDate.$dirty || orderForm.submited) && orderForm.saleDate.$invalid && 'has-error'">
				<input datepicker type="text" class="form-control" placeholder="售出日期" ng-model="editingOrder.saleDate" name="saleDate" max-date="%y-%M-%d" readonly="readonly"  required/>
			</div>
			<div class="col-sm-2" ng-class="(orderForm.years.$dirty || orderForm.submited) && orderForm.years.$invalid && 'has-error'">
				<div style="position:relative;">
					<input type="text" class="form-control" name="years" placeholder="有效时长" ng-model="editingOrder.years" 
						ng-pattern="/^([1-9]\d*)$/" maxlength="2" required/>
					<div style="position:absolute;top:0;right:0;margin:2px;line-height:30px;padding-right:10px">年</div>
				</div>
				<span class="text-danger" ng-if="orderForm.years.$dirty && orderForm.years.$invalid">
					<span ng-if="orderForm.years.$error.pattern">有效时长必须为整数年</span>
				</span>
			</div>
		</div>
		
		<hr/>

		<div class="form-group">
			<label class="col-sm-1 control-label">
				<span class="star-icon">*</span>驱动：
			</label>
			
			<div class="col-sm-6">
				订单包含 <span ng-bind="editingOrder.licenses.length"></span>个驱动。
				<c:if test="${requestScope.id == null}">
				<div class="pull-right">
					<a class="btn btn-link" ng-click="addLicense()"> <i class="fa fa-plus-circle"></i> 添加驱动</a>
				</div>
				</c:if>
			</div>
		</div>
		
		<div class="form-group" ng-repeat="license in editingOrder.licenses">
			<c:if test="${requestScope.id == null}">
			<div class="col-sm-3 col-sm-offset-1" ng-class="(searchStr!=null || orderForm.submited) && !license.selectedDriver && 'has-error'">
				<angucomplete placeholder="输入驱动名称或供应商名称检索驱动" pause="300" selectedobject="license.selectedDriver" url="/driver/list?searchstr=" 
					datafield="data" titlefield="type,name" descriptionfield="provider.name" minlength="1" inputclass="form-control" matchclass="highlight" />
			</div>
			</c:if>
			<c:if test="${requestScope.id != null}">
			<div class="col-sm-3 col-sm-offset-1">
				<input type="text" class="form-control" ng-model="license.driver.name" readonly="readonly"/>
			</div>
			</c:if>
			<div class="col-sm-3" ng-class="(orderForm['mac'+$index].$dirty || orderForm.submited) && orderForm['mac'+$index].$invalid && 'has-error'">
				<input type="text" class="form-control" name="mac{{$index}}" placeholder="MAC地址（AA:BB:CC:DD:EE:FF）" ng-model="license.mac" maxlength="17"
					ng-pattern="/^([A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2})$/" style="text-transform: uppercase;" required/>
			</div>
			<c:if test="${requestScope.id == null}">
			<div class="col-sm-1">
				<span class="btn btn-link" ng-click="removeLicense(license)" ng-if="editingOrder.licenses.length > 1"> <i class="fa fa-minus-circle"></i> 移除 </span>
			</div>
			</c:if>
		</div>
			
		
		<div class="form-group">
			<div class="col-sm-offset-1">
				<button type="button" class="btn btn-success" ng-click="saveOrder()"> <i class="fa fa-check-circle"></i> 保存 </button>
				<button type="button" class="btn btn-default" ng-click="backPage()">取消</button>
			</div>
		</div>
	</div>
</form>
</body>
</html>